<template>
	<view class="flex_c_c page filter-page c-fff">
		<view class="text_38 title c-fff" v-if="type == 2">
			手机号登录
		</view>
		<view class="text_38 title c-fff" v-if="type == 1">
			密码登录
		</view>
		<view class="form">
			<view class="flex_r form-row px-24 border-box">
				<view class="text_34 form-row-title c-fff">
					+86
				</view>
				<view class="flex1 form-row-input c-fff">
					<input v-model="formData.loginname" type="text" placeholder="请输入手机号">
				</view>
			</view>
			<view class="flex_r form-row px-24 border-box" v-if="type == 2">
				<view class="text_34 form-row-title c-fff">
					验证码
				</view>
				<view class="flex1 form-row-input">
					<input v-model="formData.code" type="text" class="c-fff" placeholder="请输入验证码">
				</view>
				<view class="form-row-code" @click="sms">
					获取验证码
				</view>
			</view>

			<view class="flex_r form-row px-24 border-box" v-if="type == 1">
				<view class="text_34 form-row-title c-fff">
					密码
				</view>
				<view class="flex1 form-row-input">
					<input v-model="formData.password" class="c-fff" type="password" placeholder="请输入密码">
				</view>
			</view>
			<view style="position:absolute; left:30px; " class="c-fff" @click="type=1" v-if="type == 2">账号密码登录</view>
			<view style="position:absolute; left:30px;" class="c-fff" @click="type=2" v-if="type == 1">验证码登录</view>
			<view style="position:absolute; right:30px;" class="c-fff" @click="goRegister">注册</view>
		</view>

		<view class="botton">
			<view class="size_white text_30 button" @click="submit">
				登录
			</view>
			<view class="icon_ agreement">
				<view>
					<u-checkbox-group>
						<u-checkbox v-model="checked" activeColor="#FDB175" shape="circle" @change="checkboxChange" />
					</u-checkbox-group>
				</view>
				<view class="c-fff f-30">
					阅读并同意<span @click="goPrivacy">《隐私政策》</span>
					和<span @click="goAgreement">《用户协议》</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { genTestUserSig } from '@/im/debug/GenerateTestUserSig.js';
	import md5 from '@/utils/md5.js';
	import constant from '@/common/constant.js';
	export default {
		data() {
			return {
				checked: false,
				type: 2,
				formData: {
					loginname: '',
					code: '',
					password: ''
				}
			}
		},
		onLoad() {},
		methods: {
			checkboxChange(e) {
				this.checked = e
			},
			async sms() {
				let res = await this.$c.post('/app/zhuce/sendCode?loginname=' + this.formData.loginname)
				if (res.code != 0) {
					this.$c.show(res.msg)
				} else {
					this.$c.show('短信已发送')
				}
			},
			goAgreement() {
				getApp().globalData.webviewUrl = 'https://www.xksndf2002.cn/agreement-lalaq.html'
				uni.navigateTo({
					url: '/pages/webview/webview'
				})
			},
			goPrivacy() {
				getApp().globalData.webviewUrl = 'https://www.xksndf2002.cn/privacy-lalaq.html'
				uni.navigateTo({
					url: '/pages/webview/webview'
				})
			},
			goRegister() {
				uni.navigateTo({
					url: '/pages/m-pages/m-login/register'
				})
			},
			submit() {
				if (!this.checked) {
					this.$c.show('请先同意用户协议')
					return;
				}
				this.loginTo()
			},
			async loginTo() {
				let url = '&password=' + md5.hex_md5(this.formData.password);
				if (2 == this.type) {
					url = '&code=' + this.formData.code;
				}
				let res = await this.$c.post('/app/login/login?loginname=' + this.formData.loginname + '&loginType=' + this.type + url);
				if (res.code != 0) {
					this.$c.show(res.msg);
					return;
				}
				
				try{
					let token = res.data.token;
					let userID = res.data.user.tengxuncode.toString();
					const userSig = genTestUserSig(userID).userSig;
					getApp().globalData.userInfo = {
						token,
						userSig,
						userID
					};
					uni.setStorageSync('userInfo', getApp().globalData.userInfo);
				}catch(e){
				}
				
				this.saveCache(res);
				const iswanshan = res.data.user.iswanshan;
				if (2==iswanshan) {
					uni.navigateTo({
						url: '/pages/m-pages/m-login/completeInfo',
						fail: (res) => {
							this.$c.show(JSON.stringify(res))
						}
					})
				} else {
					uni.switchTab({
						url: '/pages/m-pages/m-home/dazi',
						fail: (res) => {
							this.$c.show(JSON.stringify(res))
						}
					});
				}
			},
			saveCache(res) {
				uni.setStorageSync('token', res.data.token);
				uni.setStorageSync('userId', res.data.user.id);
				uni.setStorageSync('userTxCode', res.data.user.tengxuncode);
				uni.setStorageSync('userName', res.data.user.nick);
				uni.setStorageSync('userPic', res.data.user.pic);
				uni.setStorageSync('userSex', res.data.user.sex);
				//初始化IM
				getApp().isLogin();
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		position: relative;
		box-sizing: border-box;
		padding: 0 50rpx;
		width: 100%;
		height: 100vh;
		margin: 0 auto;
	}

	.top {
		position: absolute;
		top: 0;
		left: 40rpx;
		width: 100%;
		height: 100rpx;

		.top-icon {
			width: 44rpx;
			height: 44rpx;
		}
	}

	.title {
		width: 100%;
		height: 200rpx;
		line-height: 200rpx;
		margin-bottom: 20rpx;
	}

	.form {
		width: 100%;

		.form-row {
			position: relative;
			width: 100%;
			height: 90rpx;
			margin-bottom: 40rpx;
			border-radius: 8rpx;
			overflow: hidden;
			// background: red;
			// filter:blur(4rpx)

			.form-row-title {
				width: 170rpx;
				line-height: 90rpx;
			}

			.form-row-input {
				height: 100%;

				input {
					width: 100%;
					height: 100%;
				}
			}

			.form-row-code {
				box-sizing: border-box;
				padding: 0 24rpx;
				line-height: 90rpx;
				color: #fff;
				background: linear-gradient(180deg, #FDB175 5%, #F49C66 100%);
				margin-right: -24rpx;
			}

			.m-line {
				position: absolute;
				width: 100%;
				left: 0;
				bottom: 0;
				right: 0;
			}
		}

		.form-row::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			// border: 1px solid blue;
			background: #fff;
			z-index: -1;
			border-radius: 8rpx;
			background-color: rgba(255, 255, 255, 0.1);
		}
	}

	.botton {
		width: 100%;
		margin-top: 140rpx;
		margin-bottom: 100rpx;

		.button {
			width: 100%;
			height: 90rpx;
			border-radius: 50rpx;
			text-align: center;
			line-height: 90rpx;
			background: linear-gradient(180deg, #FDB175 5%, #F49C66 100%);
			margin-bottom: 20rpx;
		}

		.agreement {
			width: 100%;
			height: 50rpx;
			position: fixed;
			left: 0;
			bottom: 140rpx;

			.checkbox {
				width: 38rpx;
				height: 38rpx;
				border-radius: 50%;
				box-sizing: border-box;
				border: 1px solid #e6166a;
				margin-right: 20rpx;

				.checkbox-box {
					width: 30rpx;
					height: 30rpx;
					box-sizing: border-box;
				}
			}
		}

	}
</style>